<template>
  <tx-table-column-text :label="label" v-if="show(showKey || field)">
    <template slot-scope="scope">
      <el-link
        type="primary"
        @click="handleClick(scope.row)"
        v-if="scope.row.$action == 'modify'"
      >
        {{ getCheckboxValues(scope.row) }}
      </el-link>
      <div v-else>{{ getCheckboxValues(scope.row) }}</div>
      <!-- -->
      <el-dialog
        :title="label"
        :visible.sync="visible"
        v-if="visible"
        width="500px"
        :before-close="handleClose"
        center
        append-to-body
      >
        <div class="jydw-source-level__content" v-loading="loading">
          <slot>
            <el-select
              v-model="oneId"
              @change="change(oneId, 'one')"
              :placeholder="`请选择${label}`"
            >
              <el-option
                v-for="items in oneObjs"
                :key="items.id"
                :label="items.name"
                :value="items.id"
              ></el-option>
            </el-select>
            <el-select
              v-model="twoId"
              @change="change(twoId, 'two')"
              :placeholder="`请选择${label}`"
            >
              <el-option
                v-for="items in twoObjs"
                :key="items.id"
                :label="items.name"
                :value="items.id"
              ></el-option>
            </el-select>
          </slot>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleClose(editRow)" :disabled="loading"
            >取消</el-button
          >
          <el-button
            type="primary"
            @click="handleConfirm(editRow)"
            :disabled="loading"
            >确定</el-button
          >
        </div>
      </el-dialog>
    </template>
  </tx-table-column-text>
</template>
<script>
import { objectMerge } from "@/utils";
import columnData from "./data.json";
import columnMixin from "./mixin.js";

// let data ={
// "$action":"view",
// "$checkAll":false,
// "$checked":Array(0),
// "$isIndeterminate":false,
// "$sourceLevel":undefined,
// "$visible":false,
// "adminType":17,
// "areaCode":"150000000000",
// "areaName":"内蒙古自治区",
// "city":"",
// "cityOrgId":"",
// "cityOrgName":"",
// "country":"86",
// "county":"",
// "countyOrgId":"",
// "countyOrgName":"",
// "createdBy":"15622226661",
// "createdTime":1690302132000,
// "csAdminLevel":"Province",
// "id":"1133554831147925504",
// "job":"信息员",
// "menuId":"1000000010",
// "menuName":"救援队伍",
// "menuPermission":"1000000010::",
// "name":"王1",
// "orgId":"dp-d0435cf4f867411099ae69f9a97026a2",
// "orgName":"救援队伍1",
// "pageType":"",
// "phone":"13433333334",
// "province":"",
// "sourceLevel":undefined,
// "sourceType":"消防救援队",
// "status":1,
// "superiorOrg":"救援队伍",
// "updatedBy":"15622226661",
// "workUnit":"救援队伍1",
// }

const checkOptions = ["country", "province", "city", "county"];
export default {
  mixins: [columnMixin],
  props: {
    label: {
      type: [String],
      default: "",
    },
    showKey: {
      type: [String],
      default: "",
    },
    field: {
      type: [String],
      default: "",
    },
    rules: {
      type: Object,
      default() {
        return {};
      },
    },
    content: {
      type: Object,
      default() {
        return {
          controller: null,
          props: {},
          columns: [],
        };
      },
    },
  },
  data() {
    return {
      labels: this.label,
      columnData,
      loading: false,
      oneObjs: [],
      twoObjs: [],
      oneId: "",
      twoId: "",
      visible: false,
      editRow: {},
      value:""
    };
  },
  components: {},
  watch: {
    oneId: function () {
      this.getOrgList(this.oneId);
    },
  },
  mounted() {
    console.log("content", this.content);
    this.getList();
  },
  computed: {
    getCheckboxValues() {
      return function (row) {
        if (row && row.sourceType?.length > 0) {
        let name1 = this.oneObjs?.filter((i) => i.id == row.sourceType[0])[0]?.["name"];
        let name2 = this.twoObjs?.filter((i) => i.id == row.sourceType[1])[0]?.["name"] || "";
        return name1 + " " + name2;
      }
      return "请选择";
      };
    }, 
  },
  methods: {

    getList() {
      // 获取市列表----------请求参数parId、 保存请求返回的list列表、 默认选择的select保存起来
      this.$api.OrgController.type(
        { body: { parId: this.getParameter("menuId") || "150000000000" } },
        (res) => {
          if (res.code == 0) {
            this.oneObjs = res.data;
            this.oneId = this.editRow?.sourceType?.[0] || res?.data?.[0]["id"];
            this.twoId = ""
            this.twoObjs = []
          }
        }
      );
    },
    getOrgList(parId) {
      if (parId) {
        // 获取单位列表
        this.$api.OrgController.type({ body: { parId } }, (res) => {
          if (res.code == 0) {
            this.twoObjs = res.data;
          }
        });
      }
    },
    handleClick(row) {
      row.$sourceType = row.sourceType || [];
      this.visible = true;
      this.editRow = row;
      console.log(row.name);
    },
    change(changeVal, type) {
      console.log(this.oneId)
      // 当前改变的值、当前编辑的行、当前row中的key、当前下拉框的list数组值
      // 选择下拉
      if (type == "one") {
        this.editRow.sourceType[0] = changeVal;
        this.getOrgList(changeVal, "twoObj");
      }
      if (type == "two") {
        this.editRow.sourceType[1] = changeVal;
      }
    },
    handleConfirm(row) {
      row = this.editRow;
      row.sourceType= this.editRow.sourceType
      this.visible = false;
      console.log("this.editRow", this.editRow);
    },
    handleClose(row) {
      row.sourceType = row.$sourceType;
      this.visible = false;
    },
  },
};
</script>

<style lang="scss">
.jydw-source-level {
  &__content {
    .el-input__inner {
      width: 160px;
    }
  }
}
.el-select {
  margin-left: 6px;
}
.el-checkbox-group {
  div {
    margin: 3px 0;
  }
}
</style>
